<template>
  <div class="content">
    <div class="login">
      <img src="https://cartest.zjcjj.net/logo.png"
           alt="" />
      <el-form ref="loginForm"
               :model="form"
               :rules="rules"
               @keyup.13.native="login">
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user"
                    v-model="form.username"
                    placeholder="请输入账户"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock"
                    placeholder="请输入密码"
                    v-model="form.password"
                    show-password></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary"
                     @click="login">登录</el-button>
          <span @click="resetForm"
                class="reset">重置</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { Message } from 'element-ui'
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在5到 15个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在5到 15个字符', trigger: 'blur' },
        ],
      },
    }
  },
  // created(){
  //   document.onkeyup=(e)=>{
  //     if(e.keyCode==13){
  //       this.login();
  //     }
  //   }
  // },
  methods: {
    login: function () {
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return
        // 发送请求，验证用户信息
        const { data: res } = await this.$http.post('/sysUser/login', {
          account: this.form.username,
          password: this.form.password,
        })
        if (res.code) {
          this.$store.commit('LoginModule/setUser', res.object)
          this.$store.commit('LoginModule/setToken', res.object.token)

          localStorage.setItem('currentUser', JSON.stringify(res.object))
          localStorage.setItem('token', res.object.token)
          this.$router.push('/home')
        } else {
          Message.error(res.message)
        }
      })
    },
    resetForm: function () {
      this.$refs.loginForm.resetFields()
    },
  },
}
</script>
<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: url('../assets/images/bannerBg.jpg') no-repeat;
  background-size: 100% 100%;
}
.content .login {
  padding: 15px 15px 0;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
}
.content .login img {
  height: 103px;
  display: block;
  margin: 0 auto;
}
.el-form {
  margin-top: 15px;
}
.btns {
  display: flex;
  justify-content: center;
}
.reset {
  color: white;
  margin-left: 20px;
  cursor: pointer;
}
</style>